<template>
  <div id="app">
    <!-- <button @click="btnFn">测试按钮</button> -->

    <!-- 让topbar实现重载功能，给组件添加一个key值，只要key变化了，组件就会重新加载了（重新执行 创建和挂载钩子函数） -->
    <!-- <Topbar></Topbar> -->
    <Topbar :key="num"></Topbar>
    <Header></Header>
    <!-- 路由出口 -->
    <router-view @fatherData="fatherDataFn"/>
    <Footer></Footer>
    <Login v-show="isShowModal"></Login>
    <!--vue提供的<transition>对v-if或v-show提供过渡的效果  -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
import Topbar from "./components/Topbar";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Login from "./components/Login";
import Toast from "./components/Toast";

import { mapState } from "vuex";

// import request from "@/request/request.js";
// import { JingPinAPI } from "@/request/api.js";

export default {
  data() {
    return {
      num: 0,
    };
  },
  computed: {
    ...mapState({
      isShowModal: (state) => state.showModal.isShowModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  components: {
    Header,
    Topbar,
    Footer,
    Login,
    Toast,
  },
  watch: {
    "$route.path": {
      handler(newVal,oldVal) {
        // console.log("组件重载:");
        // console.log("步骤1: 设置:key属性作为唯一");
        // console.log("步骤2: 当路由路径变化则触发key++");
        // console.log(newVal, oldVal);
      //  默认第一次打开时，不通过key执行组件重载
        if (oldVal != "/") {
          this.num++;
        }
      },
    },
  },
  created() {
    //获取环境变量
    console.log(process.env.VUE_APP_NAME+"  "+process.env.VUE_APP_BASE_URL);

    //缺点1：每次请求都需要输入请求域名地址，如果后端一改，所有请求的组件都需写域名
    //解决：使用request.js封装axios
    // axios.get('http://kumanxuan1.f3322.net:8881/cms/products/recommend')
    // .then(res=>{
    //   console.log(res.data);
    // })
    // .catch(err=>{
    //   console.log(err);
    // })
    // 缺点2:如果后端修改了接口地址，所有组件都需要修改。
    // 解决：使用api.js统一管理接口地址。
    // request
    //   .get("/products/recommend")
    //   .then((res) => {
    //     console.log(res.data);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
    // 缺点3：在api.js如果有token,每一个请求都需要携带请求头代码
    // 解决：使用axios中的拦截器
    // JingPinAPI()
    //   .then((res) => {
    //     console.log(res.data);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
  // methods: {
  //   缺点4：由于axios是异步请求，如果在项目中的请求顺序必须是先请求A完成再继续请求B
  //   使用 async+await 来解决，可以通过它实现异步代码同步化写法。
  //    await 等待的是一个promise的结果
  //    await 它需要放在async修饰的函数内
  //   假设该事件是一个异步发送请求的方式
  //   async btnFn() {
  //     let res = await JingPinAPI();
  //     console.log("res", res);
  //     let res2 = await JingPinAPI();
  //     console.log("res2", res2);
  //     let res3 = await JingPinAPI();
  //     console.log("res3", res3);
  //   },

    //子传父，修改key属性的值,实现组件重载
    // fatherDataFn(){
    //   this.num++;
    // }
  // },
};

/*
axios封装小结：
    缺点1：每次请求都需要输入请求域名地址，如果后端一改，所有请求的组件都需写域名
    解决：使用request.js封装axios

    缺点2:如果后端修改了接口地址，所有组件都需要修改。
    解决：使用api.js统一管理接口地址。

    缺点3：在api.js如果有token,每一个请求都需要携带请求头代码
    解决：使用axios中的拦截器

    缺点4：由于axios是异步请求，如果在项目中的请求顺序必须是先请求A完成再继续请求B。
          现有方式不太直观。可能会出现回调地域的问题。
    使用 async+await 来解决，可以通过它实现异步代码同步化写法。
     await 等待的是一个promise的结果
     await 它需要放在async修饰的函数内
*/
</script>

<style lang="less">
// 进入的开始状态 == 离开的结束状态
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

// 进入的结束状态 == 离开的开始状态
.slide-enter-to,
.slide-leave {
  opacity: 1;
}

/*
vue提供了一个标签 <transition> ,为解决单个元素/组件的过渡效果


*/
</style>
